<template>
  <div :id="idname" class="chart-box"></div>
</template>
<script>
import {
  mapGetters
} from 'vuex'
export default {
  name: '', // ·������
  props: {
    chartData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    propIndex: {
      type: String,
      default: () => {
        return 'ttr'
      }
    },
    idname: {
      type: String,
      default: function() {
        const chars = '0123456789abcd'
        /** **默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
        const maxPos = chars.length
        let code = ''
        for (let i = 0; i < 8; i++) {
          code += chars.charAt(Math.floor(Math.random() * maxPos))
        }

        return 'cart' + code
      }
    }
  },
  data() {
    return {
      cardChart: undefined
    }
  },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    opened() {
      return this.sidebar.opened
    }
  },
  watch: {
    opened() {
      if (this.cardChart) {
        const that = this
        this.$nextTick(() => {
          setTimeout(() => {
            that.cardChart.resize()
          }, 200)
        })
      }
    },
    chartData: { // �����Ķ���
      deep: true, // ���ȼ�������Ϊ true
      immediate: true,
      handler: function(newV, oldV) {
        if (newV.length && this.cardChart) {
          this.setOpions()
        }
      }
    },
    propIndex: { // �����Ķ���
      deep: true, // ���ȼ�������Ϊ true
      immediate: true,
      handler: function(newV, oldV) {
        if (this.chartData.length && this.cardChart) {
          this.setOpions()
        }
      }
    }

  },
  // ������
  created() {

  },
  // ���غ�
  mounted() {
    this.cardChart = echarts.init(document.getElementById(this.idname))
    window.addEventListener('resize', () => {
      if (this.cardChart && this.cardChart.resize) {
        this.cardChart.resize()
      }
    })

    if (this.chartData.length) {
      this.setOpions()
    }
  },
  // ���ٺ�
  destroyed() {

  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {})
  },

  // ����
  methods: {
    // 设置图表参数
    setOpions() {
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          show: false,
          data: []
        },
        yAxis: {
          type: 'value',
          show: false,
          boundaryGap: false

        },
        grid: {
          top: '0px',
          left: '0px',
          right: '0px',
          bottom: '0px'
        },
        series: [{
          data: [], // 图表数据
          type: 'line',
          lineStyle: {
            color: '#24BEBE',
            width: 1

          }, // 线条的样式
          itemStyle: {
            color: '#24BEBE',
            opacity: 0 // 为0不会绘制图形拐点消失
          },
          smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgb(36, 190,190, 1)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgb(36, 190,190, 0) ' // 100% 处的颜色
              }
              ],
              global: false // 缺省为 false
            }
          }
        }]
      }
      // 获取X轴的数据
      const XData = this.chartData.map(item => {
        return item.date
      })

      // 获取Y轴的数据
      const YData = this.chartData.map(item => {
        return item[this.propIndex] * 1
      })
      option.xAxis.data = XData
      option.series[0].data = YData
      /* console.log(XData, YData, '图表数据你好') */

      this.$nextTick(() => {
        this.cardChart.setOption(option, true)
      })
      // this.cardChart.resize()
    }
  }
}
</script>

<style scoped>
  .chart-box {
    width: 100%;
    height: 58px;
  }
</style>
